<script setup lang="ts">
import { ref } from 'vue'

//
const article = ref('')

let abort: AbortController

const connectSSE = async () => {
  abort = new AbortController()
  const res = await fetch('http://localhost:3000/chat_typing', {
    signal: abort.signal
  })
  console.log(res)
}

const closeSSE = () => {
  abort.abort()
}
</script>

<template>
  <h1>ChatGPT打字效果 - EventSource</h1>
  <button @click="connectSSE">建立 SSE 连接</button>
  <button @click="closeSSE">关闭 SSE 连接</button>
  <div class="box">
    {{ article }}
  </div>
</template>

<style scoped>
.box {
  width: 300px;
  height: 300px;
  background-color: pink;
  border: 1px solid #f00;
}
</style>
